<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>从这里出发，成为真正的ikun</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/register.css">
  <link rel="stylesheet" href="./css/other.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/vue.js"></script>
  <script src="./js/axios-0.18.0.js"></script>

</head>

<body>
  <!-- 项部导航 -->
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li>
          <a href="./index.html">点击进入首页</a>
        </li>
        <li>
          <a href="./login.html">请先登录</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 头部 -->
  <div class="xtx_header">
    <!-- <div class="wrapper"> -->
      <div class="image-container">
        <!-- <img src="./images/chicken-1.jpg">
        <img src="./images/chicken-2.jpg"> -->
        <!-- <img src="./images/chicken-3.jpg"> -->
        <!-- <img src="./images/chicken-4.jpg"> -->
      </div>
    <!-- </div> -->
  </div>
  <div class="xtx-wrapper">
    <div class="container">
      <!-- 卡片 -->
      <div class="xtx-card background">
        <!-- ::before -->
        <h3>新ikun注册</h3>
        <form class="xtx-form">
          <div data-prop="username" class="xtx-form-item">
            <span class="iconfont icon-zhanghao"></span>
            <input name="username" type="text" id="username" placeholder="设置用户名称">
            <span class="msg"></span>
          </div>
          <div data-prop="phone" class="xtx-form-item">
            <span class="iconfont icon-shouji"></span>
            <input name="phone" type="text" id="phone" placeholder="输入手机号码">
            <span class="msg"></span>
          </div>
          <div data-prop="code" class="xtx-form-item">
            <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
            <input name="code" type="text" placeholder="短信验证码">
            <span class="msg"></span>
            <a class="code" href="javascript:;">发送验证码</a>
          </div>
          <div data-prop="password" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="password" type="password" id="password" placeholder="设置6至20位字母、数字和符号组合">
            <span class="msg"></span>
          </div>
          <div data-prop="confirm" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="confirm" type="password" placeholder="请再次输入上面密码">
            <span class="msg"></span>
          </div>
          <div class="xtx-form-item pl50">
            <i class="iconfont icon-queren"></i>
            已阅读并同意<i class="yonghuxieyi">《用户服务协议》</i>
          </div>

          <div class="xtx-form-item">
            <button type="submit" class="submit">下一步</button>
            <!-- <a class="submit" href="javascript:;">下一步</a> -->
          </div>
        </form>

        <!-- 用户协议弹窗 -->
        <div class="modal">
          <div class="modal-content">
            <button class="close-btn">关闭</button>
            <h2>用户协议</h2>
            <p>这是用户协议的内容。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="xtx_footer clearfix">
    <!-- 其它 -->
    <div class="extra">
      <div class="wrapper">
        <!-- 口号 -->
        <div class="slogan">
          <a href="javascript:;" class="quality">不爱请别伤害</a>
          <a href="./欢迎纯路人.html" class="quality">绿尸寒投递入口</a>
        </div>
        <!-- 版权信息 -->
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
          </p>
          <p>CopyRight &copy; 真ikun的家</p>
        </div>
      </div>
    </div>
  </div>
  <script>
    // 验证码模块
    const code = document.querySelector('.code')
    let flag = true
    code.addEventListener('click', function(){
      if(flag){
        flag = false
        let i = 6
        let n = setInterval(function(){
          i--
          code.innerHTML = `${i}秒后重新获取`  // 必须在if上面
          if(i === 0){
            code.innerHTML = '重新获取'
            flag = true
            clearInterval(n)
          }
        }, 1000)
      }
    })

    // 验证用户名
    const userName = document.querySelector('input[name=username]')

    function verifyUserName(userName){
      const a = /^[a-zA-Z0-9-_]{6,10}$/
      return a.test(userName.value)
    }

    userName.addEventListener('change', function(){
      const span = userName.nextElementSibling
      const re = verifyUserName(userName)
      if(!re){
        span.innerHTML = '输入不合法，请输入6~10位，可包含字母数字下划线等'
      }else{
        span.innerHTML = ''
      }
    })

    // 验证手机号
    const phone = document.querySelector('input[name=phone]')
    function verifyPhoneNumber(phone){
      const a = /^1(3\d|4[5-9]|5[0-35-9]|6[5-7]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      return a.test(phone.value)
    }

    phone.addEventListener('change', function(){
      const span = phone.nextElementSibling
      const re = verifyPhoneNumber(phone)
      if(!re){
        span.innerHTML = '输入不合法，请输入正确的手机号'
      }else{
        span.innerHTML = ''
      }
    })

    // 验证验证码
    const code1 = document.querySelector('input[name=code]')
    function verifyCode(code){
      const a = /^\d{6}$/
      return a.test(code.value)
    }

    code1.addEventListener('change', function(){
      const span = code1.nextElementSibling
      const re = verifyCode(code1)
      if(!re){
        span.innerHTML = '验证码错误，请重新输入'
      }else{
        span.innerHTML = ''
      }
    })

    // 验证密码
    const password = document.querySelector('input[name=password]')
    function verifyPassword(password){
      const a = /^[a-zA-Z0-9-_]{6,20}$/
      return a.test(password.value)
    }

    password.addEventListener('change', function(){
      const span = password.nextElementSibling
      const re = verifyPassword(password)
      if(!re){
        span.innerHTML = '密码不符合要求，请重新输入'
      }else{
        span.innerHTML = ''
      }
    })

    // 验证验证模块
    const confirm1 = document.querySelector('input[name=confirm]')
    function verifyConfirm(confirm1){
      return confirm1.value===password.value
    }
    confirm1.addEventListener('change', function(){
      const span = confirm1.nextElementSibling
      const re = verifyConfirm(confirm1)
      if(!re){
        span.innerHTML = '与设置密码不符，请重新输入'
      }else{
        span.innerHTML = ''
      }
    })

    // 勾选同意用户服务协议
    const queren = document.querySelector('.icon-queren')

    queren.addEventListener('click', function(){
      this.classList.toggle('icon-queren2')  // 有就加上，没有就删掉
    })

    // 提交模块
    const form = document.querySelector('form')
    let flag1 = false
    form.addEventListener('submit', function(e) {
      if (!queren.classList.contains('icon-queren2')) {
        flag1 = true
        alert('请勾选同意协议')
        e.preventDefault()
      }
      if (!verifyUserName(userName)) {
        flag1 = true
        userName.nextElementSibling.innerHTML = '输入不合法，请输入6~10位，可包含字母数字下划线等'
        e.preventDefault()
      }
      if (!verifyPhoneNumber(phone)) {
        flag1 = true
        phone.nextElementSibling.innerHTML = '输入不合法，请输入正确的手机号'
        e.preventDefault()
      }
      if (!verifyCode(code1)) {
        flag1 = true
        code1.nextElementSibling.innerHTML = '验证码错误，请重新输入'
        e.preventDefault()
      }
      if (!verifyPassword(password)) {
        flag1 = true
        password.nextElementSibling.innerHTML = '密码不符合要求，请重新输入'
        e.preventDefault()
      }
      if (!verifyConfirm(confirm1)) {
        flag1 = true
        confirm1.nextElementSibling.innerHTML = '与设置密码不符，请重新输入'
        e.preventDefault()
      }
      e.preventDefault()  // 必须加
      if (queren.classList.contains('icon-queren2') && verifyUserName(userName) && verifyPhoneNumber(phone) && verifyCode(code1) && verifyPassword(password) && verifyConfirm(confirm1)) {
        $.ajax({
          //向后台请求数据的方式
          type: 'get',
          //请求后台的地址可以简写
          url: "http://43.156.57.25:81/users/save",
          data: {
            // id: $("#id").val(),
            username: $("#username").val(),
            password: $("#password").val(),
            // realname: $("#realname").val()
            phone: $("#phone").val()
          },
          //成功调用后台方法后的回调函数
          success: function (msg) {
            console.log(msg)
            if (msg) {
              console.log('注册成功')
              window.location.href = './login.html'
            } else {
              window.location.href = './index.html'
              console.log('注册失败')
            }
          }
        });
      }
    })


      const image_container = document.querySelector('.image-container')
      for (let i = 1; i <= 14; i++) {
        const n = document.createElement('img')
        n.src = `./images/chicken-${i}.jpg`
        image_container.appendChild(n)
      }
      const love_image = document.createElement('img')
      love_image.src = './images/love.jpg'
      image_container.appendChild(love_image)


      const modal = document.querySelector(".modal");
      const mask = document.createElement("div");
      // mask.classList.add("mask");
      document.body.appendChild(mask);

      // 点击用户协议链接时打开弹窗
      document.querySelector(".yonghuxieyi").addEventListener("click", () => {
        modal.style.display = "block";
        mask.style.display = "block";
      });

      // 点击弹窗关闭按钮时关闭弹窗
      document.querySelectorAll(".close-btn, .mask").forEach((element) => {
        element.addEventListener("click", () => {
          modal.style.display = "none";
          mask.style.display = "none";
        });
      });


    // 注册之后点击下一步，将用户信息存储到数据库并跳到登陆界面

    // $(".submit").bind("click", function () {
    //   $.ajax({
    //     //向后台请求数据的方式
    //     type: 'get',
    //     //请求后台的地址可以简写
    //     url: "http://localhost:81/users/save",
    //     data: {
    //       // id: $("#id").val(),
    //       username: $("#username").val(),
    //       password: $("#password").val(),
    //       // realname: $("#realname").val()
    //       phone: $("#phone").val()
    //     },
    //     //成功调用后台方法后的回调函数
    //     success: function (response) {
    //       console.log(response)
    //       if(response){
    //         location.href = './login.html'
    //       }else{
    //         console.log('注册失败')
    //       }
    //     }
    //   });
    // });
    // }
  </script>
</body>

</html>